<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div id="cont">4</div>
    <div id="cont">5</div>
    <div id="cont">6</div>
    <ul class="list">
        <li>
            <span>一级菜单</span>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password">
</body>
<script>

    // id：选择符合要求的一个元素；哪怕有多个符合要求的元素，也只选择第一个，保证唯一性
    var oCont = document.getElementById("cont");
    console.log(oCont);
    console.log(oCont.style.background = "red");
    console.log(typeof oCont);

    // class：会选择多个符合要求的元素，数组形式；哪怕一个符合的都没有，也是以数组的形式展示
    var aBox = document.getElementsByClassName("box")
    console.log(aBox);
    console.log(aBox[0].style.background = "green");

    console.log(aBox.length)
    console.log(aBox[0])

    // tag：会选择多个符合要求的元素，数组形式；哪怕一个符合的都没有，也是以数组的形式展示
    var aSpan = document.getElementsByTagName("span");
    console.log(aSpan);

    // name：会选择多个符合要求的元素，数组形式；哪怕一个符合的都没有，也是以数组的形式展示
    // 注意哪些标签的name属性有意义：表单控件
    var password = document.getElementsByName("password");
    console.log(password);


    // ==========ES5新增的选择器===========


    // query选择器：支持常见的css选择器写法
    // 只能选择符合条件的第一个元素
    var oEle = document.querySelector( ".list li li" );
    console.log(oEle)
    
    // queryAll：
    // 可以选择所有符合要求的选择器，以数组的形式展示
    var aEle = document.querySelectorAll( ".list>li" );
    console.log(aEle);

    

    // 伪数组：有length有索引，但是不能直接使用数组方法的对象

</script>
</html>